﻿@model IEnumerable<MyMvcStoreApplication.Models.Album>
@{
    ViewBag.Title = "Social";
    var megustaurl = Url.Action("MeGusta");
    var yanomegustaurl = Url.Action("YaNoMeGusta");
    var urlUnknownAlbum = Url.Content("~/Content/Images/unknown_album.jpg");
}

<!--SCRIPTS-->
<script type="text/javascript">
        $(function () {
            $(".megusta").click(megustaaction);
            $(".yanomegusta").click(yanomegustaaction);
        });

        function megustaaction() {
            var itemid = $(this).attr("data-id");
            if (itemid != '') {
                $.post("@megustaurl", { "id": itemid },

                    function (data) {
                        //se modifica el texto que indica a cuantos usuarios les gusta esto
                        $("#likes-" + itemid).text(Likes(data));

                        //se agrega el link ya no me gusta
                        var link = $("#yanomegustatemplate").clone();
                        link.attr("data-id", itemid);
                        link.removeAttr("id");
                        link.click(yanomegustaaction);
                        $(".statusactioncontainer[data-id=" + itemid + "]").html(link);
                    });
            }
        }

        function yanomegustaaction() {
            var itemid = $(this).attr("data-id");
            if (itemid != '') {
                $.post("@yanomegustaurl", { "id": itemid },

                    function (data) {
                        //se modifica el texto que indica a cuantos usuarios les gusta esto
                        $("#likes-" + itemid).text(Likes(data));

                        //se agrega el link ya no me gusta
                        var link = $("#megustatemplate").clone();
                        link.attr("data-id", itemid);
                        link.removeAttr("id");
                        link.click(megustaaction);
                        $(".statusactioncontainer[data-id=" + itemid + "]").html(link);
                    });
            }
        }

        function Likes(likes)
        {
            return "A " + likes + " personas les gusta esto";
        }
</script>

<div id="templates" style="display: none">
    <a id="megustatemplate" href="#" class="megusta">Me gusta</a>
    <a id="yanomegustatemplate" href="#" class="yanomegusta">Ya no me gusta</a>
</div>

<!--VIEWS-->
<ul id="album-list">
@foreach (var item in Model)
{
    <li>
        <div id="album-detail">
            <img class="imgnormal" src="@(String.IsNullOrEmpty(item.TapaAlbumURL) ? @urlUnknownAlbum : @item.TapaAlbumURL)" alt="Imagen del album"/>
        </div>
        <div id="album-social">
            <table id="albumtable">
                <tr>
                    <td>
                        <div id="artist-label">@Html.DisplayFor(modelItem => item.Artista.Nombre)</div>
                        <div id="album-label">@Html.DisplayFor(modelItem => item.Nombre)</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="likes-@item.ID" class="likes-label">@String.Format("A {0} personas les gusta esto", item.Likes)</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="statusactioncontainer" data-id="@item.ID">
                            <a href="#" class="megusta" data-id="@item.ID">Me gusta</a>
                            <!--<a href="#" class="yanomegusta" data-id="@item.ID">Ya no me gusta</a>-->
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </li>
}
</ul>

@section sidebar
{
    <div id="listageneros">
        <ul>
            <li>@Html.ActionLink("Todos", "Index")</li> 
            @foreach (MyMvcStoreApplication.Models.Genero genero in ViewBag.GeneroList)
            {
                <li>@Html.ActionLink(genero.Nombre, "Genero", new { id = genero.ID })</li>
            }
        </ul>
    </div>
}